<template>
   <div class="bread">
          <ul class="fl sui-breadcrumb">
            <li>
              <a href="#">全部结果</a>
              <a v-show="false">{{Refresh}}</a>
            </li>
          </ul>
          <ul class="fl sui-tag">
            <li class="with-x" v-show="$route.query.categoryName">{{ $route.query.categoryName }}</li>
            <li class="with-x" v-show="trademark">{{ trademark.split(':')[1] }}<i @click="removetradmeark">×</i></li>
            <li class="with-x" v-for="(value,key) of list" :key="key">{{ value.split(':')[1] }}<i @click="removebread(key)">×</i></li>
          </ul>
        </div>
</template>

<script>
import { mapState } from 'vuex'
  export default {
    name:'SearchBread',
    data() {
      return {
        list:{},
        Refresh:true
      }
    },
    computed:{
      ...mapState({
        breadList:state =>state.Search.breadList,   //参数列表的数据
        trademark:state =>state.Search.trademark,  //品牌名称的数据
      })
    },
    methods:{
      removebread(key){
        this.Refresh = !this.Refresh
        this.$store.commit('REMOVEBREAD',key)
      },
      removetradmeark(){
        this.$store.commit('GETTRADMARK','')
      }
    },
    watch:{
      breadList:{
        deep:true,
        handler(value){
        this.list = value
        // console.log(value);
      }
      }
    }
  }
</script>

<style scoped lang="less">
  .bread {
      margin-bottom: 5px;
      overflow: hidden;

      .sui-breadcrumb {
        padding: 3px 15px;
        margin: 0;
        font-weight: 400;
        border-radius: 3px;
        float: left;

        li {
          display: inline-block;
          line-height: 18px;

          a {
            color: #666;
            text-decoration: none;

            &:hover {
              color: #4cb9fc;
            }
          }
        }
      }

      .sui-tag {
        margin-top: -5px;
        list-style: none;
        font-size: 0;
        line-height: 0;
        padding: 5px 0 0;
        margin-bottom: 18px;
        float: left;

        .with-x {
          font-size: 12px;
          margin: 0 5px 5px 0;
          display: inline-block;
          overflow: hidden;
          color: #000;
          background: #f7f7f7;
          padding: 0 7px;
          height: 20px;
          line-height: 20px;
          border: 1px solid #dedede;
          white-space: nowrap;
          transition: color 400ms;
          cursor: pointer;

          i {
            margin-left: 10px;
            cursor: pointer;
            font: 400 14px tahoma;
            display: inline-block;
            height: 100%;
            vertical-align: middle;
          }

          &:hover {
            color: #28a3ef;
          }
        }
      }
    }
</style>